<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link active">API</a></li></ol></aside><section class="main"><div class="main_article"><article><p>这部分API文档翻译参考了项目<a href="https://github.com/react-translate-team/react-router-CN">react-router-CN</a></p>
<h2 id="-browserrouter-">&lt; BrowserRouter &gt;<a class="anchor" href="#-browserrouter-">§</a></h2>
<p><Router> 使用HTML5提供的history API(pushState, replaceState和popstate事件)来同步UI和URL。</p>
<pre class="language-autoit"><code class="language-autoit">import { BrowserRouter } from <span class="token string">'react-router-dom'</span>

<span class="token operator">&lt;</span>BrowserRouter
  basename<span class="token operator">=</span>{optionalString}
  forceRefresh<span class="token operator">=</span>{optionalBool}
  getUserConfirmation<span class="token operator">=</span>{optionalFunc}
  keyLength<span class="token operator">=</span>{optionalNumber}
<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>

</code></pre>
<h3 id="basename-string">basename: String<a class="anchor" href="#basename-string">§</a></h3>
<p>当前位置的基准URL。如果你的页面部署在服务器的二级子目录，你需要将basename设置到此子目录。 正确的URL格式是前面有一个前导斜杠，但不能有尾部斜杠。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>BrowserRouter basename<span class="token operator">=</span><span class="token string">"/calendar"</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/today"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator">/</span><span class="token operator">/</span> 渲染为 <span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">"/calendar/today"</span><span class="token operator">></span>
</code></pre>
<h3 id="getuserconfirmation-func">getUserConfirmation: func<a class="anchor" href="#getuserconfirmation-func">§</a></h3>
<p>当导航需要确认时执行的函数。默认使用window.confirm。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> 使用默认的确认函数
<span class="token keyword">const</span> getConfirmation <span class="token operator">=</span> <span class="token punctuation">(</span>message<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token keyword">const</span> allowTransition <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
  <span class="token function">callback</span><span class="token punctuation">(</span>allowTransition<span class="token punctuation">)</span>
}

<span class="token operator">&lt;</span>BrowserRouter getUserConfirmation<span class="token operator">=</span>{getConfirmation}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="forcerefresh-bool">forceRefresh: bool<a class="anchor" href="#forcerefresh-bool">§</a></h3>
<p>当设置为true时，在导航的过程中整个页面将会刷新。只有当浏览器不支持HTML5的 history API 时，才设置为true。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> supportsHistory <span class="token operator">=</span> <span class="token string">'pushState'</span> <span class="token keyword">in</span> window<span class="token punctuation">.</span>history
<span class="token operator">&lt;</span>BrowserRouter forceRefresh<span class="token operator">=</span>{!supportsHistory}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="keylength-number">keyLength: number<a class="anchor" href="#keylength-number">§</a></h3>
<p>location.key的长度。默认是6。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>BrowserRouter keyLength<span class="token operator">=</span>{<span class="token number">12</span>}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="children-node">children: node<a class="anchor" href="#children-node">§</a></h3>
<p>渲染单一子组件（元素）。</p>
<h2 id="-hashrouter-">&lt; HashRouter &gt;<a class="anchor" href="#-hashrouter-">§</a></h2>
<p>HashRouter 是一种特定的 <Router>， HashRouter 使用 URL 的 hash (例如：window.location.hash) 来同步UI和URL。</p>
<p>注意：使用 hash 的方式记录导航历史不支持 location.key 和 location.state。在以前的版本中，我们为这种行为提供了 shim，但是仍有一些问题我们无法解决。任何依赖此行为的代码或插件都将无法正常使用。 由于该技术仅用于支持传统的浏览器，因此在用于浏览器时可以使用 <BrowserHistory> 代替。</p>
<pre class="language-autoit"><code class="language-autoit">import { HashRouter } from <span class="token string">'react-router-dom'</span>

<span class="token operator">&lt;</span>HashRouter<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>HashRouter<span class="token operator">></span>
</code></pre>
<h3 id="basename-string-1">basename: string<a class="anchor" href="#basename-string-1">§</a></h3>
<p>当前位置的基准 URL。正确的 URL 格式是前面有一个前导斜杠，但不能有尾部斜杠。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>HashRouter basename<span class="token operator">=</span><span class="token string">"/calendar"</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/today"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator">/</span><span class="token operator">/</span> renders <span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">"#/calendar/today"</span><span class="token operator">></span>
</code></pre>
<h3 id="getuserconfirmation-func-1">getUserConfirmation: func<a class="anchor" href="#getuserconfirmation-func-1">§</a></h3>
<p>当导航需要确认时执行的函数。默认使用 window.confirm。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> 使用默认的确认函数
<span class="token keyword">const</span> getConfirmation <span class="token operator">=</span> <span class="token punctuation">(</span>message<span class="token punctuation">,</span> callback<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token keyword">const</span> allowTransition <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span>
  <span class="token function">callback</span><span class="token punctuation">(</span>allowTransition<span class="token punctuation">)</span>
}

<span class="token operator">&lt;</span>HashRouter getUserConfirmation<span class="token operator">=</span>{getConfirmation}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="hashtype-string">hashType: string<a class="anchor" href="#hashtype-string">§</a></h3>
<p>window.location.hash 使用的 hash 类型。有如下几种：</p>
<ul>
<li>&quot;slash&quot; - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops</li>
<li>&quot;noslash&quot; - 后面没有斜杠，例如 # 和 #sunshine/lollipops</li>
<li>&quot;hashbang&quot; - Google 风格的 “ajax crawlable”，例如 #!/ 和 #!/sunshine/lollipops</li>
</ul>
<p>默认为 &quot;slash&quot;。</p>
<h3 id="children-node-1">children: node<a class="anchor" href="#children-node-1">§</a></h3>
<p>渲染单一子组件（元素）。</p>
<h2 id="-link-">&lt; Link &gt;<a class="anchor" href="#-link-">§</a></h2>
<p>为您的应用提供声明式的、无障碍导航。</p>
<pre class="language-autoit"><code class="language-autoit">import { Link } from <span class="token string">'react-router-dom'</span>

<span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/about"</span><span class="token operator">></span>关于<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
</code></pre>
<h3 id="to-string">to: string<a class="anchor" href="#to-string">§</a></h3>
<p>需要跳转到的路径(pathname)或地址（location）。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/courses"</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="to-object">to: object<a class="anchor" href="#to-object">§</a></h3>
<p>需要跳转到的地址（location）。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span>{{
  pathname<span class="token punctuation">:</span> <span class="token string">'/courses'</span><span class="token punctuation">,</span>
  search<span class="token punctuation">:</span> <span class="token string">'?sort=name'</span><span class="token punctuation">,</span>
  hash<span class="token punctuation">:</span> <span class="token string">'#the-hash'</span><span class="token punctuation">,</span>
  state<span class="token punctuation">:</span> { fromDashboard<span class="token punctuation">:</span> <span class="token boolean">true</span> }
}}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="replace-bool">replace: bool<a class="anchor" href="#replace-bool">§</a></h3>
<p>当设置为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。<br>
当设置为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。<br>
默认为 false。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/courses"</span> replace <span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h2 id="-navlink-">&lt; NavLink &gt;<a class="anchor" href="#-navlink-">§</a></h2>
<p>&lt; NavLink &gt;是 &lt; Link &gt; 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数</p>
<pre class="language-autoit"><code class="language-autoit">import { NavLink } from <span class="token string">'react-router-dom'</span>

<span class="token operator">&lt;</span>NavLink <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/about"</span><span class="token operator">></span>About<span class="token operator">&lt;</span><span class="token operator">/</span>NavLink<span class="token operator">></span>
</code></pre>
<h3 id="activeclassname-string">activeClassName: string<a class="anchor" href="#activeclassname-string">§</a></h3>
<p>当元素匹配上当前 URL 的时候, 这个类会被赋予给这个元素. 其默认值为 active, 这个值会被添加到 className 属性的后面(追加)</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>NavLink
  <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/faq"</span>
  activeClassName<span class="token operator">=</span><span class="token string">"selected"</span>
<span class="token operator">></span>FAQs<span class="token operator">&lt;</span><span class="token operator">/</span>NavLink<span class="token operator">></span>
</code></pre>
<h3 id="activestyle-object">activeStyle: object<a class="anchor" href="#activestyle-object">§</a></h3>
<p>当元素被选中时, 为此元素添加样式</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>NavLink
  <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/faq"</span>
  activeStyle<span class="token operator">=</span>{{
    fontWeight<span class="token punctuation">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
    color<span class="token punctuation">:</span> <span class="token string">'red'</span>
   }}
<span class="token operator">></span>FAQs<span class="token operator">&lt;</span><span class="token operator">/</span>NavLink<span class="token operator">></span>
</code></pre>
<h3 id="exact-bool">exact: bool<a class="anchor" href="#exact-bool">§</a></h3>
<p>当值为 true 时, 只有当地址完全匹配 class 和 style 才会应用</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>NavLink
  exact
  <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/profile"</span>
<span class="token operator">></span>Profile<span class="token operator">&lt;</span><span class="token operator">/</span>NavLink
</code></pre>
<h3 id="strict-bool">strict: bool<a class="anchor" href="#strict-bool">§</a></h3>
<p>当值为 true 时，在确定位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线 有关详细信息，请参阅<a href="https://reacttraining.com/react-router/core/api/Route/strict-bool">&lt; Route strict &gt;</a>文档。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>NavLink
  strict
  <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/events/"</span>
<span class="token operator">></span>Events<span class="token operator">&lt;</span><span class="token operator">/</span>NavLink<span class="token operator">></span>
</code></pre>
<h3 id="isactive-func">isActive: func<a class="anchor" href="#isactive-func">§</a></h3>
<p>添加用于确定链接是否活动的额外逻辑的功能。 如果您想要做的更多，请验证链接的路径名是否与当前URL的 pathname 匹配。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> only consider an event active <span class="token keyword">if</span> its event id is an odd number
<span class="token keyword">const</span> oddEvent <span class="token operator">=</span> <span class="token punctuation">(</span>match<span class="token punctuation">,</span> location<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token keyword">if</span> <span class="token punctuation">(</span>!match<span class="token punctuation">)</span> {
    return <span class="token boolean">false</span>
  }
  <span class="token keyword">const</span> eventID <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>eventID<span class="token punctuation">)</span>
  return !<span class="token function">isNaN</span><span class="token punctuation">(</span>eventID<span class="token punctuation">)</span> <span class="token operator">&amp;</span><span class="token operator">&amp;</span> eventID % <span class="token number">2</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token number">1</span>
}

<span class="token operator">&lt;</span>NavLink
  <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/events/123"</span>
  isActive<span class="token operator">=</span>{oddEvent}
<span class="token operator">></span>Event <span class="token number">123</span><span class="token operator">&lt;</span><span class="token operator">/</span>NavLink<span class="token operator">></span>
</code></pre>
<h2 id="-prompt-">&lt; Prompt &gt;<a class="anchor" href="#-prompt-">§</a></h2>
<p>当用户离开当前页的时候做出提示. 当你的应用处在特定状态, 此状态不希望用户离开时(例如填写表格到一半), 你应该使用<Prompt>。</p>
<pre class="language-autoit"><code class="language-autoit">import { Prompt } from <span class="token string">'react-router'</span>

<span class="token operator">&lt;</span>Prompt
  when<span class="token operator">=</span>{formIsHalfFilledOut}
  message<span class="token operator">=</span><span class="token string">"Are you sure you want to leave?"</span>
<span class="token operator">/</span><span class="token operator">></span>

</code></pre>
<h3 id="message-string">message: string<a class="anchor" href="#message-string">§</a></h3>
<p>当用户尝试导航离开时，提示用户的消息。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Prompt message<span class="token operator">=</span><span class="token string">"Are you sure you want to leave?"</span> <span class="token operator">/</span><span class="token operator">></span>

</code></pre>
<h3 id="message-func">message: func<a class="anchor" href="#message-func">§</a></h3>
<p>会与用户试图前往下一个地址（location） 和 action 一起被调用。<br>
函返回一个字符串用作向用户提示，或者返回true用作允许过渡。</p>
<pre class="language-autoit"><code class="language-autoit">Prompt
  message<span class="token operator">=</span>{location <span class="token operator">=</span><span class="token operator">></span>
    location<span class="token punctuation">.</span>pathname<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">"/app"</span><span class="token punctuation">)</span>
      <span class="token operator">?</span> <span class="token boolean">true</span>
      <span class="token punctuation">:</span> `Are you sure you want <span class="token keyword">to</span> go <span class="token keyword">to</span> ${location<span class="token punctuation">.</span>pathname}<span class="token operator">?</span>`
  }
<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="when-bool">when: bool<a class="anchor" href="#when-bool">§</a></h3>
<p>你可以随时渲染<Prompt>，而不是有条件地在警戒后面渲染它。</p>
<ul>
<li>当when={true} 时，禁止导航</li>
<li>当when={false} 时，允许导航</li>
</ul>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Prompt when<span class="token operator">=</span>{formIsHalfFilledOut} message<span class="token operator">=</span><span class="token string">"Are you sure?"</span> <span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="-memoryrouter-">&lt; MemoryRouter &gt;<a class="anchor" href="#-memoryrouter-">§</a></h3>
<p>&lt; Router &gt; 能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写). 在非浏览器或者测试环境比如React Native下很有用。</p>
<pre class="language-autoit"><code class="language-autoit">import { MemoryRouter } from <span class="token string">'react-router'</span>

<span class="token operator">&lt;</span>MemoryRouter<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>MemoryRouter<span class="token operator">></span>
</code></pre>
<h3 id="initialentries-array">initialEntries: array<a class="anchor" href="#initialentries-array">§</a></h3>
<p>在历史栈中的一个 location 数组. 这些可能会成为含有 { pathname, search, hash, state } 或一些简单的 URL 字符串的完整的地址对象</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>MemoryRouter
  initialEntries<span class="token operator">=</span>{<span class="token punctuation">[</span> <span class="token string">'/one'</span><span class="token punctuation">,</span> <span class="token string">'/two'</span><span class="token punctuation">,</span> { pathname<span class="token punctuation">:</span> <span class="token string">'/three'</span> } <span class="token punctuation">]</span>}
  initialIndex<span class="token operator">=</span>{<span class="token number">1</span>}
<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>MemoryRouter<span class="token operator">></span>
</code></pre>
<h3 id="initialindex-number">initialIndex: number<a class="anchor" href="#initialindex-number">§</a></h3>
<p>initialEntries 数组中的初始化地址索引</p>
<h3 id="getuserconfirmation-func-2">getUserConfirmation: func<a class="anchor" href="#getuserconfirmation-func-2">§</a></h3>
<p>用于确认导航的函数. 当使用<MemoryRouter>直接使用<Prompt>时，你必须使用这个选项</p>
<h3 id="keylength-number-1">keyLength: number<a class="anchor" href="#keylength-number-1">§</a></h3>
<p>location.key 的长度, 默认为 6</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>MemoryRouter keyLength<span class="token operator">=</span>{<span class="token number">12</span>}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="children-node-2">children: node<a class="anchor" href="#children-node-2">§</a></h3>
<p>要呈现的 单个子元素。</p>
<h2 id="-redirect-">&lt; Redirect &gt;<a class="anchor" href="#-redirect-">§</a></h2>
<p>渲染<Redirect> 的时候将会导航到一个新的地址（location）。这个新的地址（location）将会覆盖在访问历史记录里面的原地址，就像服务端的重定向（HTTP 3XX）一样</p>
<pre class="language-autoit"><code class="language-autoit">import { Route<span class="token punctuation">,</span> Redirect } from <span class="token string">'react-router'</span>

<span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/"</span> render<span class="token operator">=</span>{<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  loggedIn <span class="token operator">?</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Redirect <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/dashboard"</span><span class="token operator">/</span><span class="token operator">></span>
  <span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>PublicHomePage<span class="token operator">/</span><span class="token operator">></span>
  <span class="token punctuation">)</span>
<span class="token punctuation">)</span>}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="to-string-1">to: string<a class="anchor" href="#to-string-1">§</a></h3>
<p>重定向目标URL。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Redirect <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/somewhere/else"</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="to-object-1">to: object<a class="anchor" href="#to-object-1">§</a></h3>
<p>重定向目标地址(location)。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Redirect <span class="token keyword">to</span><span class="token operator">=</span>{{
  pathname<span class="token punctuation">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
  search<span class="token punctuation">:</span> <span class="token string">'?utm=your+face'</span><span class="token punctuation">,</span>
  state<span class="token punctuation">:</span> { referrer<span class="token punctuation">:</span> currentLocation }
}}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="push-bool">push: bool<a class="anchor" href="#push-bool">§</a></h3>
<p>当设置为 true 时，重定向（redirecting）将会把新地址加入访问历史记录里面，而不是替换掉目前的地址</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Redirect push <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/somewhere/else"</span><span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="from-string">from: string<a class="anchor" href="#from-string">§</a></h3>
<p>需要被重定向的路径（pathname）。当渲染一个包含在<Switch>里面的<Redirect>的时候，这可以用作匹配一个地址（location）。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Redirect from<span class="token operator">=</span><span class="token string">'/old-path'</span> <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">'/new-path'</span><span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">'/new-path'</span> component<span class="token operator">=</span>{Place}<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
</code></pre>
<h2 id="-route-">&lt; Route &gt;<a class="anchor" href="#-route-">§</a></h2>
<p>想要理解并使用好React Router，最重要的可能就是Route组件了。Route组件主要的作用就是当一个location匹配路由的path时，渲染某些UI。<br>
考虑这样的代码：</p>
<pre class="language-autoit"><code class="language-autoit">import { BrowserRouter as Router<span class="token punctuation">,</span> Route } from <span class="token string">'react-router-dom'</span>

<span class="token operator">&lt;</span>Router<span class="token operator">></span>
  <span class="token operator">&lt;</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/"</span> component<span class="token operator">=</span>{Home}<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/news"</span> component<span class="token operator">=</span>{NewsFeed}<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
</code></pre>
<p>如果应用的地址是/,那么相应的UI会类似这个样子：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>div<span class="token operator">></span>
  <span class="token operator">&lt;</span>Home<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>!<span class="token operator">-</span><span class="token operator">-</span> react<span class="token operator">-</span>empty<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
</code></pre>
<p>如果应用的地址是/news,那么相应的UI就会成为这个样子：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>div<span class="token operator">></span>
  <span class="token operator">&lt;</span>!<span class="token operator">-</span><span class="token operator">-</span> react<span class="token operator">-</span>empty<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>NewsFeed<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
</code></pre>
<p>这里的react-empty注释只是演示了React渲染null的细节，但对我们具有启发性。其实Route就算是null也会被渲染，只要地址与路由的路径匹配，组件就会渲染。</p>
<h3 id="route%E6%B8%B2%E6%9F%93%E6%96%B9%E6%B3%95">Route渲染方法<a class="anchor" href="#route%E6%B8%B2%E6%9F%93%E6%96%B9%E6%B3%95">§</a></h3>
<p>这三种渲染方法都会获得相同的三个的属性：</p>
<ul>
<li>match</li>
<li>location</li>
<li>history</li>
</ul>
<h3 id="component">component<a class="anchor" href="#component">§</a></h3>
<p>只有在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/user/:username"</span> component<span class="token operator">=</span>{User}<span class="token operator">/</span><span class="token operator">></span>

<span class="token keyword">const</span> User <span class="token operator">=</span> <span class="token punctuation">(</span>{ match }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  return <span class="token operator">&lt;</span>h1<span class="token operator">></span>Hello {match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>username}!<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
}
</code></pre>
<p>如果你使用component(而不是像下面这样使用render),路由会根据指定的组件使用React.createElement来创建一个新的React element。这就意味着如果你提供的是一个内联的函数的话会带来很多意料之外的重新挂载。所以，对于内联渲染，要使用render属性(如下所示)。</p>
<h3 id="render-func">render: func<a class="anchor" href="#render-func">§</a></h3>
<p>这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便。<br>
使用render属性，你可以选择传一个在地址匹配时被调用的函数，而不是像使用component属性那样得到一个新创建的React element。使用render属性会获得跟使用component属性一样的route props。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> 便捷的行内渲染
<span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/home"</span> render<span class="token operator">=</span>{<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">&lt;</span>div<span class="token operator">></span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>}<span class="token operator">/</span><span class="token operator">></span>

<span class="token operator">/</span><span class="token operator">/</span> 包装<span class="token operator">/</span>合成
<span class="token keyword">const</span> FadingRoute <span class="token operator">=</span> <span class="token punctuation">(</span>{ component<span class="token punctuation">:</span> Component<span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>rest }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Route {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>rest} render<span class="token operator">=</span>{props <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>FadeIn<span class="token operator">></span>
      <span class="token operator">&lt;</span>Component {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>props}<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>FadeIn<span class="token operator">></span>
  <span class="token punctuation">)</span>}<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span>

<span class="token operator">&lt;</span>FadingRoute path<span class="token operator">=</span><span class="token string">"/cool"</span> component<span class="token operator">=</span>{Something}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>警告: &lt; Route component &gt;的优先级要比&lt; Route render &gt;高，所以不要在同一个 <Route>中同时使用这两个属性。</p>
<h3 id="children-func">children: func<a class="anchor" href="#children-func">§</a></h3>
<p>有时候你可能想不管地址是否匹配都渲染一些内容，这种情况你可以使用children属性。它与render属性的工作方式基本一样，除了它是不管地址匹配与否都会被调用。<br>
除了在路径不匹配URL时match的值为null之外，children渲染属性会获得与component和render一样的route props。这就允许你根据是否匹配路由来动态地调整UI了，来看这个例子，如果理由匹配的话就添加一个active类：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>ul<span class="token operator">></span>
  <span class="token operator">&lt;</span>ListItemLink <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/somewhere"</span><span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>ListItemLink <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/somewhere-else"</span><span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">></span>

<span class="token keyword">const</span> ListItemLink <span class="token operator">=</span> <span class="token punctuation">(</span>{ <span class="token keyword">to</span><span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>rest }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span>{<span class="token keyword">to</span>} children<span class="token operator">=</span>{<span class="token punctuation">(</span>{ match }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>li className<span class="token operator">=</span>{match <span class="token operator">?</span> <span class="token string">'active'</span> <span class="token punctuation">:</span> <span class="token string">''</span>}<span class="token operator">></span>
      <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span>{<span class="token keyword">to</span>} {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>rest}<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
  <span class="token punctuation">)</span>}<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span>
</code></pre>
<p>这种属性对于动画也特别有用:</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route children<span class="token operator">=</span>{<span class="token punctuation">(</span>{ match<span class="token punctuation">,</span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>rest }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  {<span class="token operator">/</span><span class="token operator">*</span> Animate总会被渲染<span class="token punctuation">,</span> 所以你可以使用生命周期来使它的子组件出现
    或者隐藏
  <span class="token operator">*</span><span class="token operator">/</span>}
  <span class="token operator">&lt;</span>Animate<span class="token operator">></span>
    {match <span class="token operator">&amp;</span><span class="token operator">&amp;</span> <span class="token operator">&lt;</span>Something {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>rest}<span class="token operator">/</span><span class="token operator">></span>}
  <span class="token operator">&lt;</span><span class="token operator">/</span>Animate<span class="token operator">></span>
<span class="token punctuation">)</span>}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>警告: &lt; Route component &gt;和&lt; Route render &gt; 的优先级都比&lt; Route children &gt; 高，所以在同一个<Route>中不要同时使用一个以上的属性.</p>
<h3 id="path-string">path: string<a class="anchor" href="#path-string">§</a></h3>
<p>可以是任何path-to-regexp能理解的有效URL。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/users/:id"</span> component<span class="token operator">=</span>{User}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>没有path属性的Route 总是会 匹配。</p>
<h3 id="exact-bool-1">exact: bool<a class="anchor" href="#exact-bool-1">§</a></h3>
<p>当值为true时，则要求路径与location.pathname必须 完全 匹配。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/one"</span> component<span class="token operator">=</span>{About}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<div class="table_wrapper"><table>
<thead>
<tr>
<th style="text-align:center">路径</th>
<th style="text-align:center">location.pathname</th>
<th style="text-align:center">exact</th>
<th style="text-align:center">是否匹配?</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">/one</td>
<td style="text-align:center">/one/two</td>
<td style="text-align:center">true</td>
<td style="text-align:center">否</td>
</tr>
<tr>
<td style="text-align:center">/one</td>
<td style="text-align:center">/one/two</td>
<td style="text-align:center">false</td>
<td style="text-align:center">是</td>
</tr>
</tbody>
</table></div>
<h3 id="strict-bool-1">strict: bool<a class="anchor" href="#strict-bool-1">§</a></h3>
<p>当设为true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname，这个值并不会对location.pathname中有其他的片段有影响。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route strict path<span class="token operator">=</span><span class="token string">"/one/"</span> component<span class="token operator">=</span>{About}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<div class="table_wrapper"><table>
<thead>
<tr>
<th style="text-align:center">路径</th>
<th style="text-align:center">location.pathname</th>
<th style="text-align:center">是否匹配?</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">/one/</td>
<td style="text-align:center">/one</td>
<td style="text-align:center">否</td>
</tr>
<tr>
<td style="text-align:center">/one/</td>
<td style="text-align:center">/one/</td>
<td style="text-align:center">是</td>
</tr>
<tr>
<td style="text-align:center">/one/</td>
<td style="text-align:center">/one/two</td>
<td style="text-align:center">是</td>
</tr>
</tbody>
</table></div>
<p>警告: stict可以强制location.pathname不包含结尾的斜线，但是要做到这点必须把strict和exect都设置为true。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route exact strict path<span class="token operator">=</span><span class="token string">"/one"</span> component<span class="token operator">=</span>{About}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<div class="table_wrapper"><table>
<thead>
<tr>
<th style="text-align:center">路径</th>
<th style="text-align:center">location.pathname</th>
<th style="text-align:center">是否匹配?</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">/one</td>
<td style="text-align:center">/one</td>
<td style="text-align:center">是</td>
</tr>
<tr>
<td style="text-align:center">/one</td>
<td style="text-align:center">/one/</td>
<td style="text-align:center">否</td>
</tr>
<tr>
<td style="text-align:center">/one</td>
<td style="text-align:center">/one/two</td>
<td style="text-align:center">否</td>
</tr>
</tbody>
</table></div>
<h3 id="location-object">location: object<a class="anchor" href="#location-object">§</a></h3>
<p>&lt; Route &gt;元素尝试将路径path当前history location（通常是当前浏览器URL）进行匹配。 除此之外，具有不同pathname的location也可以被传统用来匹配。</p>
<p>当你需要将&lt; Route &gt;匹配到当前history location以外的location时，这非常有用，如动画过渡示例中所示。</p>
<p>如果&lt; Route &gt;包含在&lt; Switch &gt;中并匹配了传递给<Switch>的location（或当前history location），那么传递给&lt; Route &gt;的location属性将会被&lt; Switch &gt;使用的所覆盖。</p>
<h3 id="sensitive-bool">sensitive: bool<a class="anchor" href="#sensitive-bool">§</a></h3>
<p>如果该属性为true,则在匹配时区分大小写</p>
<div class="table_wrapper"><table>
<thead>
<tr>
<th style="text-align:center">path</th>
<th style="text-align:center">location.pathname</th>
<th style="text-align:center">sensitive</th>
<th style="text-align:center">是否匹配?</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">/one</td>
<td style="text-align:center">/one</td>
<td style="text-align:center">true</td>
<td style="text-align:center">yes</td>
</tr>
<tr>
<td style="text-align:center">/One</td>
<td style="text-align:center">/one</td>
<td style="text-align:center">true</td>
<td style="text-align:center">no</td>
</tr>
<tr>
<td style="text-align:center">/One</td>
<td style="text-align:center">/one</td>
<td style="text-align:center">false</td>
<td style="text-align:center">yes</td>
</tr>
</tbody>
</table></div>
<h2 id="-router-">&lt; Router &gt;<a class="anchor" href="#-router-">§</a></h2>
<p>Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口，而是使用高级的路由：</p>
<ul>
<li>&lt; BrowserRouter &gt;</li>
<li>&lt; HashRouter &gt;</li>
<li>&lt; MemoryRouter &gt;</li>
<li>&lt; NativeRouter &gt;</li>
<li>&lt; StaticRouter &gt;</li>
</ul>
<p>最常见的使用底层的&lt; Router &gt;的情形就是用来与Redux或者Mobx之类的状态管理库的定制的history保持同步。注意不是说使用状态管理库就必须使用&lt; Router &gt;，它仅用作于深度集成。</p>
<pre class="language-autoit"><code class="language-autoit">import { Router } from <span class="token string">'react-router'</span>
import createBrowserHistory from <span class="token string">'history/createBrowserHistory'</span>

<span class="token keyword">const</span> history <span class="token operator">=</span> <span class="token function">createBrowserHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token operator">&lt;</span>Router history<span class="token operator">=</span>{history}<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
</code></pre>
<h3 id="history-object">history: object<a class="anchor" href="#history-object">§</a></h3>
<p>用来导航的history对象.</p>
<pre class="language-autoit"><code class="language-autoit">import createBrowserHistory from <span class="token string">'history/createBrowserHistory'</span>

<span class="token keyword">const</span> customHistory <span class="token operator">=</span> <span class="token function">createBrowserHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span>Router history<span class="token operator">=</span>{customHistory}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<h3 id="children-node-3">children: node<a class="anchor" href="#children-node-3">§</a></h3>
<p>需要渲染的单一组件。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Router<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
</code></pre>
<h2 id="-staticrouter-">&lt; StaticRouter &gt;<a class="anchor" href="#-staticrouter-">§</a></h2>
<p>&lt; Router &gt; 从不会改变地址<br>
当用户实际上没有点击时, 这在服务端的渲染场景中可能会非常有用, 所以这个地址从来没有改变. 因此, 称为: static (静态). 当您只需要插入一个位置并在渲染输出上作出断言时，它也可用于简单的测试 这里有一个简单 nodejs 服务 : 为&lt; Redirect &gt;和其他请求的常规HTML发送302状态代码：</p>
<pre class="language-autoit"><code class="language-autoit">import { createServer } from <span class="token string">'http'</span>
import React from <span class="token string">'react'</span>
import ReactDOMServer from <span class="token string">'react-dom/server'</span>
import { StaticRouter } from <span class="token string">'react-router'</span>

<span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {

  <span class="token operator">/</span><span class="token operator">/</span> This context object contains the results of the render
  <span class="token keyword">const</span> context <span class="token operator">=</span> {}

  <span class="token keyword">const</span> html <span class="token operator">=</span> ReactDOMServer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>StaticRouter location<span class="token operator">=</span>{req<span class="token punctuation">.</span>url} context<span class="token operator">=</span>{context}<span class="token operator">></span>
      <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
  <span class="token punctuation">)</span>

  <span class="token operator">/</span><span class="token operator">/</span> context<span class="token punctuation">.</span>url will contain the URL <span class="token keyword">to</span> redirect <span class="token keyword">to</span> <span class="token keyword">if</span> a <span class="token operator">&lt;</span>Redirect<span class="token operator">></span> was used
  <span class="token keyword">if</span> <span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span> {
    res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">302</span><span class="token punctuation">,</span> {
      Location<span class="token punctuation">:</span> context<span class="token punctuation">.</span>url
    }<span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  } <span class="token keyword">else</span> {
    res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  }
}<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span>
</code></pre>
<h3 id="basename-string-2">basename: string<a class="anchor" href="#basename-string-2">§</a></h3>
<p>所有地址的基本 URL . 正确格式化的基本名称应该有一个主要的斜杠，但没有尾部斜杠</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>StaticRouter basename<span class="token operator">=</span><span class="token string">"/calendar"</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/today"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator">/</span><span class="token operator">/</span> renders <span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">"/calendar/today"</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
</code></pre>
<h3 id="location-string">location: string<a class="anchor" href="#location-string">§</a></h3>
<p>服务器收到的 URL, 在 node 服务上可能是 req.url</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>StaticRouter location<span class="token operator">=</span>{req<span class="token punctuation">.</span>url}<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
</code></pre>
<h3 id="location-object-1">location: object<a class="anchor" href="#location-object-1">§</a></h3>
<p>一个格式像 { pathname, search, hash, state } 的地址对象</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>StaticRouter location<span class="token operator">=</span>{{ pathname<span class="token punctuation">:</span> <span class="token string">'/bubblegum'</span> }}<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
</code></pre>
<h3 id="context-object">context: object<a class="anchor" href="#context-object">§</a></h3>
<p>记录渲染结果的纯JavaScript对象。 见上面的例子</p>
<h3 id="children-node-4">children: node<a class="anchor" href="#children-node-4">§</a></h3>
<p>要呈现的单个子元素。</p>
<h2 id="-switch-">&lt; Switch &gt;<a class="anchor" href="#-switch-">§</a></h2>
<p>渲染匹配地址(location)的第一个 &lt; Route &gt; 或者 &lt; Redirect &gt;<br>
这与只使用一堆&lt; Route &gt;有什么不同？<br>
&lt; Switch &gt;的独特之处是独它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的&lt; Route &gt;都会被渲染。思考下面的代码：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/about"</span> component<span class="token operator">=</span>{About}<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/:user"</span> component<span class="token operator">=</span>{User}<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Route component<span class="token operator">=</span>{NoMatch}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>如果现在的URL是 /about ，那么 &lt; About &gt;, &lt; User &gt;, 还有 &lt; NoMatch &gt; 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 &lt; Route &gt; 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个&lt; Route &gt; 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/"</span> component<span class="token operator">=</span>{Home}<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/about"</span> component<span class="token operator">=</span>{About}<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/:user"</span> component<span class="token operator">=</span>{User}<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route component<span class="token operator">=</span>{NoMatch}<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
</code></pre>
<p>现在，如果我们处于 /about, <Switch> 将开始寻找匹配的 <Route>。 <Route path="/about"/> 将被匹配， <Switch> 将停止寻找匹配并渲染<About>。 同样，如果我们处于 /michael ， <User> 将被渲染。</p>
<p>这对于过渡动画也是起作用的，因为匹配的 <Route> 在与前一个相同的位置被渲染。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span>Fade<span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
    {<span class="token operator">/</span><span class="token operator">*</span> there will only ever be one child here <span class="token operator">*</span><span class="token operator">/</span>}
    {<span class="token operator">/</span><span class="token operator">*</span> 这里只会有一个子节点 <span class="token operator">*</span><span class="token operator">/</span>}
    <span class="token operator">&lt;</span>Route<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>Route<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Fade<span class="token operator">></span>

<span class="token operator">&lt;</span>Fade<span class="token operator">></span>
  <span class="token operator">&lt;</span>Route<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route<span class="token operator">/</span><span class="token operator">></span>
  {<span class="token operator">/</span><span class="token operator">*</span> there will always be two children here<span class="token punctuation">,</span>
      one might render <span class="token keyword">null</span> though<span class="token punctuation">,</span> making transitions
      a bit more cumbersome <span class="token keyword">to</span> work out <span class="token operator">*</span><span class="token operator">/</span>}
   {<span class="token operator">/</span><span class="token operator">*</span> 这里总是有两个子节点<span class="token punctuation">,</span>
      一个可能会渲染为<span class="token keyword">null</span><span class="token punctuation">,</span> 使计算过渡增加了一点麻烦 <span class="token operator">*</span><span class="token operator">/</span>}    
<span class="token operator">&lt;</span><span class="token operator">/</span>Fade<span class="token operator">></span>
</code></pre>
<h3 id="children-node-5">children: node<a class="anchor" href="#children-node-5">§</a></h3>
<p>&lt; Switch &gt; 的所有子节点应为 &lt; Route &gt; 或 &lt; Redirect &gt; 元素。只有匹配当前地址(location)的第一个子节点才会被渲染。&lt; Route &gt; 元素使用它们的 path 属性匹配，&lt; Redirect &gt; 元素使用它们的 from 属性匹配。没有 path 属性的&lt; Route &gt; 或者 没有 from 属性的 &lt; Redirect &gt; 将总是可以匹配当前的地址(location)</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/"</span> component<span class="token operator">=</span>{Home}<span class="token operator">/</span><span class="token operator">></span>

  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/users"</span> component<span class="token operator">=</span>{Users}<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Redirect from<span class="token operator">=</span><span class="token string">"/accounts"</span> <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/users"</span><span class="token operator">/</span><span class="token operator">></span>

  <span class="token operator">&lt;</span>Route component<span class="token operator">=</span>{NoMatch}<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
</code></pre>
<h2 id="history">history<a class="anchor" href="#history">§</a></h2>
<p>本文档中的「history」以及「history对象」请参照 history 包中的内容。 History 是 React Router 的两大重要依赖之一（除去 React 本身），在不同的 Javascript 环境中，history 以多种形式实现了对于 session 历史的管理。<br>
我们会经常使用以下术语：</p>
<ul>
<li>「browser history」 - history 在 DOM 上的实现，经常使用于支持 HTML5 history API 的浏览器端。</li>
<li>「hash history」 - history 在 DOM 上的实现，经常使用于旧版本浏览器端。</li>
<li>「memory history」 - 一种存储于内存的 history 实现，经常用于测试或是非 DOM 环境（例如 React Native）。</li>
</ul>
<p>history 对象通常会具有以下属性和方法：</p>
<ul>
<li>length -（ number 类型）指的是 history 堆栈的数量。</li>
<li>action -（ string 类型）指的是当前的动作（action），例如 PUSH，REPLACE 以及 POP 。</li>
<li>location -（ object类型）是指当前的位置（location），location 会具有如下属性：
<ul>
<li>pathname -（ string 类型）URL路径。</li>
<li>search -（ string 类型）URL中的查询字符串（query string）。</li>
<li>hash -（ string 类型）URL的 hash 分段。</li>
<li>state -（ string 类型）是指 location 中的状态，例如在 push(path, state) 时，state会描述什么时候 location 被放置到堆栈中等信息。这个 state 只会出现在 browser history 和 memory history 的环境里。</li>
</ul>
</li>
<li>push(path, [state]) -（ function 类型）在 hisotry 堆栈顶加入一个新的条目。</li>
<li>replace(path, [state]) -（ function 类型）替换在 history 堆栈中的当前条目。</li>
<li>go(n) -（ function 类型）将 history 对战中的指针向前移动 n 。</li>
<li>goBack() -（ function 类型）等同于 go(-1) 。</li>
<li>goForward() -（ function 类型）等同于 go(1) 。</li>
<li>block(prompt) -（ function 类型）阻止跳转，（请参照 history 文档）。</li>
</ul>
<h3 id="history-%E6%98%AF%E5%8F%AF%E5%8F%98%E7%9A%84mutable">history 是可变的（mutable）<a class="anchor" href="#history-%E6%98%AF%E5%8F%AF%E5%8F%98%E7%9A%84mutable">§</a></h3>
<p>history 对象是可变的，因此我们建议从 <Route> 的 prop里来获取 location ，而不是从 history.location 直接获取。这样做可以保证 React 在生命周期中的钩子函数正常执行，例如以下代码：</p>
<pre class="language-autoit"><code class="language-autoit">class Comp extends React<span class="token punctuation">.</span>Component {
  <span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> {
    <span class="token operator">/</span><span class="token operator">/</span> locationChanged 变量为 <span class="token boolean">true</span>
    <span class="token keyword">const</span> locationChanged <span class="token operator">=</span> nextProps<span class="token punctuation">.</span>location !<span class="token operator">==</span> this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location

    <span class="token operator">/</span><span class="token operator">/</span> 不正确，locationChanged 变量会 <span class="token operator">*</span>永远<span class="token operator">*</span> 为 <span class="token boolean">false</span> ，因为 history 是可变的（mutable）。
    <span class="token keyword">const</span> locationChanged <span class="token operator">=</span> nextProps<span class="token punctuation">.</span>history<span class="token punctuation">.</span>location !<span class="token operator">==</span> this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span>location
  }
}

<span class="token operator">&lt;</span>Route component<span class="token operator">=</span>{Comp}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>不同的实现也许会提供给你额外的属性，更多详情请参照 <a href="https://github.com/ReactTraining/history#properties">history 文档</a>。</p>
<h2 id="location">location<a class="anchor" href="#location">§</a></h2>
<p>Location 是指你当前的位置，下一步打算去的位置，或是你之前所在的位置，形式大概就像这样：</p>
<pre class="language-autoit"><code class="language-autoit">{
  key<span class="token punctuation">:</span> <span class="token string">'ac3df4'</span><span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 在使用 hashHistory 时，没有 key
  pathname<span class="token punctuation">:</span> <span class="token string">'/somewhere'</span>
  search<span class="token punctuation">:</span> <span class="token string">'?some=search-string'</span><span class="token punctuation">,</span>
  hash<span class="token punctuation">:</span> <span class="token string">'#howdy'</span><span class="token punctuation">,</span>
  state<span class="token punctuation">:</span> {
    <span class="token punctuation">[</span>userDefined<span class="token punctuation">]</span><span class="token punctuation">:</span> <span class="token boolean">true</span>
  }
}
</code></pre>
<p>你使用以下几种方式来获取 location 对象：</p>
<ul>
<li>在 Route component 中，以 this.props.location 的方式获取，</li>
<li>在 Route render 中，以 ({ location }) =&gt; () 的方式获取，</li>
<li>在 Route children 中，以 ({ location }) =&gt; () 的方式获取，</li>
<li>在 withRouter 中，以 this.props.location 的方式获取。</li>
</ul>
<p>你也可以在 history.location 中获取 location 对象，但是别那么写，因为 history 是可变的。更多信息请参见 <a href="https://github.com/ReactTraining/history#properties">history 文档</a>。</p>
<p>location 对象不会发生改变，因此你可以在生命周期的钩子函数中使用 location 对象来查看当前页面的位置是否发生改变，这种技巧在获取远程数据以及使用动画时非常有用。</p>
<pre class="language-autoit"><code class="language-autoit">对象来查看当前页面的位置是否发生改变，这种技巧在获取远程数据以及使用动画时非常有用。<span class="token function">componentWillReceiveProps</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> {
  <span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>location !<span class="token operator">==</span> this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">)</span> {
    <span class="token operator">/</span><span class="token operator">/</span> 已经跳转了！
  }
}
</code></pre>
<p>你可以在不同环境中使用 location ：</p>
<ul>
<li>Web Link to</li>
<li>Native Link to</li>
<li>Redirect to</li>
<li>history.push</li>
<li>history.replace
通常情况下，你只需要给一个字符串当做 location ，但是，当你需要添加一些 location 的状态时，你可以对象的形式使用 location 。并且当你需要多个 UI ，而这些 UI 取决于历史时，例如弹出框（modal），使用location 对象会有很大帮助。</li>
</ul>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span> 通常你只需要这样使用 location
<span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/somewhere"</span><span class="token operator">/</span><span class="token operator">></span>

<span class="token operator">/</span><span class="token operator">/</span> 但是你同样可以这么用
<span class="token keyword">const</span> location <span class="token operator">=</span> {
  pathname<span class="token punctuation">:</span> <span class="token string">'/somewhere'</span>
  state<span class="token punctuation">:</span> { fromDashboard<span class="token punctuation">:</span> <span class="token boolean">true</span> }
}

<span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span>{location}<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Redirect <span class="token keyword">to</span><span class="token operator">=</span>{location}<span class="token operator">/</span><span class="token operator">></span>
history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>location<span class="token punctuation">)</span>
history<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>location<span class="token punctuation">)</span>
</code></pre>
<p>最后，你可以把 location 传入一下组件：</p>
<ul>
<li>Route</li>
<li>Switch
这样做可以让组件不使用路由状态（router state）中的真实 location，因为我们有时候需要组件去渲染一个其他的 location 而不是本身所处的真实 location，比如使用动画或是等待跳转时。</li>
</ul>
<h2 id="match">match<a class="anchor" href="#match">§</a></h2>
<p>match 对象包含了 <Route path> 如何与URL匹配的信息。match 对象包含以下属性：</p>
<ul>
<li>params -（ object 类型）即路径参数，通过解析URL中动态的部分获得的键值对。</li>
<li>isExact - 当为 true 时，整个URL都需要匹配。</li>
<li>path -（ string 类型）用来做匹配的路径格式。在需要嵌套 <Route> 的时候用到。</li>
<li>url -（ string 类型）URL匹配的部分，在需要嵌套 <Link> 的时候会用到。
你可以在以下地方获取 match 对象：</li>
<li>在 Route component 中，以 this.props.match 方式。</li>
<li>在 Route render 中，以 ({ match }) =&gt; () 方式。</li>
<li>在 Route children 中，以 ({ match }) =&gt; () 方式</li>
<li>在 withRouter 中，以 this.props.match 方式</li>
<li>matchPath 的返回值
当一个 Route 没有 path 时，它会匹配一切路径，你会匹配到最近的父级。在 withRouter 里也是一样的。</li>
</ul>
<h3 id="null-matches">null matches<a class="anchor" href="#null-matches">§</a></h3>
<p>即使路径的路径与当前位置不匹配，&lt; Route &gt;也可以使用子属性来调用其子功能。 但在这种情况下，匹配将为null。 能够在匹配时渲染&lt; Route &gt;的内容可能是有用的，但是这种情况会产生一些挑战。</p>
<p>“解析”URL的默认方法是将match.url字符串拼接到“相对”路径。</p>
<pre class="language-autoit"><code class="language-autoit">`${match<span class="token punctuation">.</span>url}<span class="token operator">/</span>relative<span class="token operator">-</span>path`
</code></pre>
<p>如果在匹配为空时尝试执行此操作，最终会出现TypeError。 这意味着在使用子属性尝试连接&lt; Route &gt;内的“relative”路径是不安全的。</p>
<p>当你在生成空匹配对象的&lt; Route &gt;中使用没有path的&lt; Route &gt;时，会出现类似但更微妙的情况。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> location<span class="token punctuation">.</span>pathname <span class="token operator">=</span> <span class="token string">'/matches'</span>
<span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">'/does-not-match'</span> children<span class="token operator">=</span>{<span class="token punctuation">(</span>{ match }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">/</span><span class="token operator">/</span> match <span class="token operator">==</span><span class="token operator">=</span> <span class="token keyword">null</span>
  <span class="token operator">&lt;</span>Route render<span class="token operator">=</span>{<span class="token punctuation">(</span>{ match<span class="token punctuation">:</span>pathlessMatch }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
    <span class="token operator">/</span><span class="token operator">/</span> pathlessMatch <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">?</span><span class="token operator">?</span><span class="token operator">?</span>
  <span class="token punctuation">)</span>}<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span>}<span class="token operator">/</span><span class="token operator">></span>
</code></pre>
<p>没有path属性的&lt; Route &gt;从其父级继承匹配对象。 如果她们的父匹配为null，那么她们的匹配也将为null。 这意味着<br>
a）任何子路由/链接必须是绝对路径，因为没有要解析的父级<br>
b）父级匹配可以为null的无路径路由将需要使用子属性来渲染。</p>
<h2 id="matchpath">matchPath<a class="anchor" href="#matchpath">§</a></h2>
<p>这允许您使用与一样使用的相同的代码，除了在正常渲染循环之外，例如在服务器上渲染之前收集数据依赖关系</p>
<pre class="language-autoit"><code class="language-autoit">import { matchPath } from <span class="token string">'react-router'</span>

<span class="token keyword">const</span> match <span class="token operator">=</span> <span class="token function">matchPath</span><span class="token punctuation">(</span><span class="token string">'/users/123'</span><span class="token punctuation">,</span> {
  path<span class="token punctuation">:</span> <span class="token string">'/users/:id'</span>
  exact<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  strict<span class="token punctuation">:</span> <span class="token boolean">false</span>
}<span class="token punctuation">)</span>
</code></pre>
<h3 id="pathname">pathname<a class="anchor" href="#pathname">§</a></h3>
<p>第一参数是你想要匹配的 pathname, 如果你正在服务端的 nodos.js 下使用, 将会是 req.url</p>
<h3 id="props">props<a class="anchor" href="#props">§</a></h3>
<p>第二个参数是不予匹配的属性, 他们于匹配 Route 接收的参数属性是相同的</p>
<pre class="language-autoit"><code class="language-autoit">{
  path<span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> like <span class="token operator">/</span>users<span class="token operator">/</span><span class="token punctuation">:</span>id
  strict<span class="token punctuation">,</span> <span class="token operator">/</span><span class="token operator">/</span> 可选<span class="token punctuation">,</span> 默认 <span class="token boolean">false</span>
  exact <span class="token operator">/</span><span class="token operator">/</span> 可选<span class="token punctuation">,</span> 默认 <span class="token boolean">false</span>
}
</code></pre>
<h2 id="withrouter">withRouter<a class="anchor" href="#withrouter">§</a></h2>
<p>你可以通过withRouter的高阶组件访问history对象的属性和最相似的&lt; Route &gt;的匹配。 每次路由更改时，无论如何是如何渲染的，withRouter将会给封装的组件传递更新的match,location 和 history属性。</p>
<pre class="language-autoit"><code class="language-autoit">mport React from <span class="token string">"react"</span><span class="token comment">;</span>
import PropTypes from <span class="token string">"prop-types"</span><span class="token comment">;</span>
import { withRouter } from <span class="token string">"react-router"</span><span class="token comment">;</span>

<span class="token operator">/</span><span class="token operator">/</span> A simple component that shows the pathname of the current location
class ShowTheLocation extends React<span class="token punctuation">.</span>Component {
  <span class="token keyword">static</span> propTypes <span class="token operator">=</span> {
    match<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
    location<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span>
    history<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>object<span class="token punctuation">.</span>isRequired
  }<span class="token comment">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    <span class="token keyword">const</span> { match<span class="token punctuation">,</span> location<span class="token punctuation">,</span> history } <span class="token operator">=</span> this<span class="token punctuation">.</span>props<span class="token comment">;</span>

    return <span class="token operator">&lt;</span>div<span class="token operator">></span>You are now at {location<span class="token punctuation">.</span>pathname}<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token comment">;</span>
  }
}

<span class="token operator">/</span><span class="token operator">/</span> Create a new component that is <span class="token string">"connected"</span> <span class="token punctuation">(</span><span class="token keyword">to</span> borrow redux
<span class="token operator">/</span><span class="token operator">/</span> terminology<span class="token punctuation">)</span> <span class="token keyword">to</span> the router<span class="token punctuation">.</span>
<span class="token keyword">const</span> ShowTheLocationWithRouter <span class="token operator">=</span> <span class="token function">withRouter</span><span class="token punctuation">(</span>ShowTheLocation<span class="token punctuation">)</span><span class="token comment">;</span>
</code></pre>
<h3 id="%E9%87%8D%E8%A6%81%E6%8F%90%E9%86%92">重要提醒<a class="anchor" href="#%E9%87%8D%E8%A6%81%E6%8F%90%E9%86%92">§</a></h3>
<p>withRouter不追踪location的更改，而是在从&lt; Router &gt;组件传播出去的location改变后重新渲染，这意味着withRouter不会在路由改变时重新渲染，除非她的父组件重新渲染。</p>
<p>静态方法和属性。</p>
<p>封装的组件的所有非React的静态方法和属性都会被自动的复制到已连接的组件。</p>
<h3 id="componentwrappedcomponent">Component.WrappedComponent<a class="anchor" href="#componentwrappedcomponent">§</a></h3>
<p>封装的组件作为返回组件上的静态属性WrappedComponent暴露，这个组件可以用于测试。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> MyComponent<span class="token punctuation">.</span>js
export <span class="token keyword">default</span> <span class="token function">withRouter</span><span class="token punctuation">(</span>MyComponent<span class="token punctuation">)</span>

<span class="token operator">/</span><span class="token operator">/</span> MyComponent<span class="token punctuation">.</span>test<span class="token punctuation">.</span>js
import MyComponent from <span class="token string">'./MyComponent'</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>MyComponent<span class="token punctuation">.</span>WrappedComponent location<span class="token operator">=</span>{{<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>}} <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">)</span>

</code></pre>
<h3 id="wrappedcomponentref-func">wrappedComponentRef: func<a class="anchor" href="#wrappedcomponentref-func">§</a></h3>
<p>作为引用的属性被传递给封装的组件的函数</p>
<pre class="language-autoit"><code class="language-autoit">class Container extends React<span class="token punctuation">.</span>Component {
  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    this<span class="token punctuation">.</span>component<span class="token punctuation">.</span><span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">;</span>
  }

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
    return <span class="token operator">&lt;</span>MyComponent wrappedComponentRef<span class="token operator">=</span>{c <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>this<span class="token punctuation">.</span>component <span class="token operator">=</span> c<span class="token punctuation">)</span>} <span class="token operator">/</span><span class="token operator">></span><span class="token comment">;</span>
  }
}
</code></pre></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#-browserrouter-">&lt; BrowserRouter &gt;</a><ol><li><a href="#basename-string">basename: String</a></li><li><a href="#getuserconfirmation-func">getUserConfirmation: func</a></li><li><a href="#forcerefresh-bool">forceRefresh: bool</a></li><li><a href="#keylength-number">keyLength: number</a></li><li><a href="#children-node">children: node</a></li></ol></li><li><a href="#-hashrouter-">&lt; HashRouter &gt;</a><ol><li><a href="#basename-string-1">basename: string</a></li><li><a href="#getuserconfirmation-func-1">getUserConfirmation: func</a></li><li><a href="#hashtype-string">hashType: string</a></li><li><a href="#children-node-1">children: node</a></li></ol></li><li><a href="#-link-">&lt; Link &gt;</a><ol><li><a href="#to-string">to: string</a></li><li><a href="#to-object">to: object</a></li><li><a href="#replace-bool">replace: bool</a></li></ol></li><li><a href="#-navlink-">&lt; NavLink &gt;</a><ol><li><a href="#activeclassname-string">activeClassName: string</a></li><li><a href="#activestyle-object">activeStyle: object</a></li><li><a href="#exact-bool">exact: bool</a></li><li><a href="#strict-bool">strict: bool</a></li><li><a href="#isactive-func">isActive: func</a></li></ol></li><li><a href="#-prompt-">&lt; Prompt &gt;</a><ol><li><a href="#message-string">message: string</a></li><li><a href="#message-func">message: func</a></li><li><a href="#when-bool">when: bool</a></li><li><a href="#-memoryrouter-">&lt; MemoryRouter &gt;</a></li><li><a href="#initialentries-array">initialEntries: array</a></li><li><a href="#initialindex-number">initialIndex: number</a></li><li><a href="#getuserconfirmation-func-2">getUserConfirmation: func</a></li><li><a href="#keylength-number-1">keyLength: number</a></li><li><a href="#children-node-2">children: node</a></li></ol></li><li><a href="#-redirect-">&lt; Redirect &gt;</a><ol><li><a href="#to-string-1">to: string</a></li><li><a href="#to-object-1">to: object</a></li><li><a href="#push-bool">push: bool</a></li><li><a href="#from-string">from: string</a></li></ol></li><li><a href="#-route-">&lt; Route &gt;</a><ol><li><a href="#route%E6%B8%B2%E6%9F%93%E6%96%B9%E6%B3%95">Route渲染方法</a></li><li><a href="#component">component</a></li><li><a href="#render-func">render: func</a></li><li><a href="#children-func">children: func</a></li><li><a href="#path-string">path: string</a></li><li><a href="#exact-bool-1">exact: bool</a></li><li><a href="#strict-bool-1">strict: bool</a></li><li><a href="#location-object">location: object</a></li><li><a href="#sensitive-bool">sensitive: bool</a></li></ol></li><li><a href="#-router-">&lt; Router &gt;</a><ol><li><a href="#history-object">history: object</a></li><li><a href="#children-node-3">children: node</a></li></ol></li><li><a href="#-staticrouter-">&lt; StaticRouter &gt;</a><ol><li><a href="#basename-string-2">basename: string</a></li><li><a href="#location-string">location: string</a></li><li><a href="#location-object-1">location: object</a></li><li><a href="#context-object">context: object</a></li><li><a href="#children-node-4">children: node</a></li></ol></li><li><a href="#-switch-">&lt; Switch &gt;</a><ol><li><a href="#children-node-5">children: node</a></li></ol></li><li><a href="#history">history</a><ol><li><a href="#history-%E6%98%AF%E5%8F%AF%E5%8F%98%E7%9A%84mutable">history 是可变的（mutable）</a></li></ol></li><li><a href="#location">location</a></li><li><a href="#match">match</a><ol><li><a href="#null-matches">null matches</a></li></ol></li><li><a href="#matchpath">matchPath</a><ol><li><a href="#pathname">pathname</a></li><li><a href="#props">props</a></li></ol></li><li><a href="#withrouter">withRouter</a><ol><li><a href="#%E9%87%8D%E8%A6%81%E6%8F%90%E9%86%92">重要提醒</a></li><li><a href="#componentwrappedcomponent">Component.WrappedComponent</a></li><li><a href="#wrappedcomponentref-func">wrappedComponentRef: func</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./API/API.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>